function DragTool(id, range, selcallback){
        var sId = id + "_drag_s", tId = id + "_drag_t", 
            hId = id + "_hr", bId = id + "_hr_bg", cId = id + "_canvas";
        var max = $("#" + id).width();
        this.config = {
            maxLength:max,
            min:range[0], max:range[1], from:0, to:max * 1, step:1,
            width: 4,  // line width
            color:'#ffffff', backColor: '#00ffff',
            dragBorder: 5, dragHeight: 10, top: 10,
        };

        /*
            range[0]      x   
            -------- = --------
            range[1]     max
        */
        function scale(x){ return parseInt(x / max * (range[1] - range[0]) + range[0]); }

        
        this.init = function(){
            var main = "<div style='position:relative'><hr id='"
            + bId +"' style='width:100%; border:0px; position:absolute;'><hr id='"
            + hId +"' style='border:0px; position:absolute;'>" + "<div id='"
            + sId +"' style='position:absolute;border-left:solid;'></div>" + "<div id='" 
            + tId +"' style='position:absolute;border-left:solid;'></div>"
            + "<div style='position:absolute; width:100%; font-size:12px; text-align:center'>"
            + "<span style='float:left'></span><label style='font-size:12px'>等级(制氧)</label>"
            + "<span style='float:right'></span></div>"
            +"</div>";
            var cvs = '<canvas id="'+ cId +'" width = "'+ max +'" height = "30 "></canvas>';
            $("#"+id).html(main + cvs);
            this.setStyle();
            this.setData();
            this.draw();
        };

        this.draw = function(){
            var canvas = document.getElementById(cId);
            var context = canvas.getContext("2d");
            var x = 0, y = 30, h1 = 4, h = 7, step = 50, dis = max / 50;
            
            for(var i = 0; i <= step; i++ ){
                context.moveTo(x + i * dis, y);
                context.lineTo(x + i * dis, y - ((i % 5) ? h1 : h));
            }
            
            context.lineWidth = 0.8;
            context.strokeStyle = "#00ffff";
            context.stroke();
        };

        this.setStyle = function(){
            var cfg = this.config;
            var $start = $("#" + sId), $stop = $("#" + tId), 
                $line = $("#" + hId), $bkLine = $line.prev();
            var cssDrag = { 
                'border-left-color':cfg.color, 'border-left-width':cfg.dragBorder, 
                'top': cfg.top + 17, 'height': cfg.dragHeight, 
                'cursor':'e-resize', 'width':0 
            };
            $start.css(cssDrag);
            $stop.css(cssDrag);
            $line.css({ 'background-color':cfg.color, 'height':cfg.width, top:cfg.top });
            $bkLine.css({ 'background-color':cfg.backColor, 'height':cfg.width, top:cfg.top });

            $stop.next().css({ 'top': cfg.top + 32 });
            var spans = $stop.next().find("span");
            spans[0].innerHTML = cfg.min;
            spans[1].innerHTML = (cfg.max / 10000) + "万";
        }

        this.setData = function(sleep){
            var cfg = this.config;
            var $start = $("#" + sId), $stop = $("#" + tId), $line = $("#" + hId);

            $start.css({ 'left': cfg.from });
            $stop.css({ 'left': cfg.to });
            $line.css({ 'width': cfg.to - cfg.from });
            if(!sleep)update();
        }

        function update(values){
            var $start = $("#" + sId), $stop = $("#" + tId);
            var l1 = $start.position().left, l2 = $stop.position().left;
            $("#" + hId).css({ 'width':l2 - l1, 'left':l1 });
            $start.attr("title", scale(l1));
            $stop.attr("title", scale(l2));
            if(values){
                values[0] = scale(l1);
                values[1] =  scale(l2);    
            }
        }
        // 刻度提示
        $("#" + id).on('mousemove', function(e){
            var x = e.offsetX > 0 ? e.offsetX : 0;
            $(this).attr("title", scale(x));
        });

        this.init();
        var base = new PosBase(id, bId, update, selcallback);
        var cp1 = ChangePos(base, sId, 0, tId); 
        var cp2 = ChangePos(base, tId, 1, sId); 

    }

    function PosBase(id, back, callbackMove, callbackOK){
        this.dragId = id;
        this.src_X = 0;
        this.max = $("#" + back).width();
        this.current = [0, 0];
        this.backObj = $("#" + back);
        this.index = 0;
        var $this = this;
        this.callbackMove = function(idx){
            callbackMove($this.current);
            $this.index = idx;
        };
        this.callbackOK = function(){
            callbackOK($this.current[0], $this.current[1]);
        }
        // cout(back);
    }

    function ChangePos(base, id, index, link){
        var obj = $("#" + id) , linkObj = $("#" + link);
        var $this = this; 
        var is_mouse_down = false;

        obj.on('mousedown', function(e){
            base.src_X = e.pageX;
            is_mouse_down = true;
        });

        //// 限制前后滑块移动区间
        function limitPos(pos){
            var lLeft = linkObj.position().left;
            if(index==0){
                if(pos>=lLeft)pos = lLeft - 3;
            }else{
                if(pos<=lLeft)pos = lLeft + 3;
            }
            return pos;
        }

        $(document).on('mousemove', function(e){

            if(!is_mouse_down)return;
            var pos = e.pageX - base.backObj.offset().left;
            pos = (pos > base.max) ? base.max : (pos < 0 ? 0 : pos)
            pos = limitPos(pos);
            obj.css("left", pos);
            base.callbackMove(index);
        });

        

        $("#" + base.dragId).on("mouseout", function(){
            //if(is_mouse_down==true)doSomething();
            // cout("----");
        });

        $(document).on("mouseup",function(e){
            doSomething();
            
        });

        function doSomething(){
            if(is_mouse_down==true && index==base.index)base.callbackOK();
            is_mouse_down = false; 
        }
    }